<template>
    <view class="content">
        <view class="text-area">
            <text class="zoom-text">请选择您的照片</text>
        </view>
        <view class="text-b">
            您选择的布局是{{ ptoNum }}宫格
        </view>
        <button class="upload-btn" @click="chooseImage">
            上传图片
        </button>
        <view class="image-grid" :style="{
            'grid-template-columns': `repeat(${gridColumns}, 1fr)`,
            'min-height': gridHeight
        }">
            <view v-for="(img, index) in imageList" :key="index" class="image-item">
                <image :src="img" mode="aspectFill" class="preview-image" />
            </view>
        </view>
        <view class="footer">
            <button class="confirm-btn" @click="navigateToPreview">
                continue
            </button>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
const { globalData } = getApp()
const typeParam = ref('')
const ptoNum = ref('')
const imageList = ref([])

const gridHeight = ref('auto')
const isFirstLoad = ref(true)
onLoad((options) => {
    if (options?.type) {
        typeParam.value = decodeURIComponent(options.type)
        switch (typeParam.value) {
            case 'two': ptoNum.value = '二'; break
            case 'four': ptoNum.value = '四'; break
            case 'six': ptoNum.value = '六'; break
            default: ptoNum.value = '未知'
        }
    }
    uni.getSystemInfo({
        success(res) {
            const screenHeight = res.windowHeight
            const calcHeight = screenHeight - 400
            // gridHeight.value = `${calcHeight}px`
        }
    })
})

onShow(() => {
    if (!isFirstLoad.value) {
        imageList.value = []
        globalData.photos = []
    }
    isFirstLoad.value = false
})

// 修改布局
const gridColumns = computed(() => {
    switch (typeParam.value) {
        case 'two': return 2
        case 'four': return 2
        case 'six': return 2
        default: return 1
    }
})

const chooseImage = () => {
    const max = {
        // two: 2,
        four: 4
        // six: 6
    }[typeParam.value] || 0

    uni.chooseImage({
        count: max,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
            imageList.value = res.tempFilePaths.slice(0, max)
            globalData.photos = imageList.value

        },
        fail: () => {
            imageList.value = []
        }
    })
}

const navigateToPreview = () => {
    if (imageList.value && imageList.value.length > 0) {
        const params = {
            type: typeParam.value,
            images: encodeURIComponent(JSON.stringify(imageList.value))
        }
        uni.navigateTo({
            url: `/pages/preview/index?type=${params.type}&images=${params.images}`
        })
    } else {
        uni.showToast({
            title: '请先选择图片后再预览',
            icon: 'none',
            duration: 2000
        })
    }
}
</script>

<style lang="scss">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
}

.text-area {
    display: flex;
    justify-content: center;
    width: 100%;
}

.zoom-text {
    margin-top: 50rpx;
    font-weight: bolder;
    font-size: 76rpx;
    color: #333;
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    animation: zoom 2s ease-in-out infinite;
    animation-fill-mode: both;
    backface-visibility: hidden;
}

@keyframes zoom {

    0%,
    100% {
        -webkit-transform: scale(0.7) translateZ(0);
        transform: scale(0.7) translateZ(0);
    }

    50% {
        -webkit-transform: scale(0.8) translateZ(0);
        transform: scale(0.8) translateZ(0);
    }
}

.text-b {
    margin-top: 20rpx;
    font-size: 28rpx;
}

.upload-btn {
    margin: 30rpx 0;
    width: 80%;
    font-size: 32rpx;
    height: 80rpx;
    line-height: 60rpx;
    position: relative;
    left: auto;
    transform: none;
    background: transparent !important;
    border: 6rpx solid black;
    border-radius: 50rpx;
    color: black;
    box-shadow: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.image-grid {
    display: grid;
    gap: 20rpx;
    width: 90%;
    margin: 40rpx auto 0;
    grid-auto-rows: 1fr;
}

.image-item {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    &:nth-child(n+5) {
        margin-top: 20rpx;
    }
}

.preview-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer {
    position: fixed;
    bottom: 0rpx;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.confirm-btn {
    width: 300rpx;
    height: 80rpx;
    line-height: 60rpx;
    position: relative;
    margin-top: 30rpx;
    margin-bottom: 50rpx;
    left: auto;
    transform: none;
    background: transparent !important;
    border: 6rpx solid black;
    border-radius: 50rpx;
    color: black;
    font-size: 28rpx;
    box-shadow: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.confirm-btn:active {
    transform: scale(0.95);
}
</style>